<template>
  <div class="login-wrap">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      class="demo-ruleForm"
      label-position="left"
      label-width="80px"
      status-icon
    >
      <div class="login-title">用 户 登 录</div>

      <el-form-item label="用户名:" prop="name">
        <el-input
          v-model.trim.lazy="ruleForm.name"
          placeholder="请输入用户名"
        />
      </el-form-item>
      <el-form-item label="密 码:" prop="password">
        <el-input
          v-model.trim.lazy="ruleForm.password"
          placeholder="请输入密码"
          show-password
        />
      </el-form-item>
      <div class="big-btn">
        <el-button class="btn" type="primary" @click="handleLogin"
          >登录
        </el-button>
        <el-button class="btn" type="primary" @click="dialogFormVisible = true">
          注册
        </el-button>
      </div>
    </el-form>

    <!-- 点击注册的对话表单 -->
    <el-dialog :show-close="false" v-model="dialogFormVisible" title="注册">
      <el-form ref="ruleFormRef" :model="form" :rules="rules">
        <el-form-item label="用户名：" label-width="80px" prop="name">
          <el-input
            autocomplete="off"
            class="form-name"
            v-model.trim.lazy="form.name"
          />
        </el-form-item>
        <el-form-item label="密码：" label-width="80px" prop="password">
          <el-input
            autocomplete="off"
            v-model.trim.lazy="form.psw"
            show-password
          />
        </el-form-item>
      </el-form>

      <div class="dialog-footer">
        <el-button class="cancel" @click="DialogCancel">取消</el-button>
        <el-button type="primary" class="ok" @click="handleRegister">
          确定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { getLoginHttp, getNewUserHttp } from '../../request/api/user'
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { putUserHttp } from '../../request/userHttp'
const user_type = ref(0)
const user_onlinestatus = ref(0)
const user_other = ref(0)
const ruleForm = ref({
  name: '',
  password: '',
})

//表单校验
const rules = ref({
  name: [
    {
      required: true,
      message: '用户名不能为空',
      tigger: 'blur',
    },
    {
      min: 3,
      max: 8,
      message: '用户名长度必须在3~8之间！',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '密码不能为空',
      tigger: 'blur',
    },
  ],
})
const dialogFormVisible = ref(false)

// 注册表单
const form = reactive({
  name: '',
  psw: '',
})

const $router = useRouter()

// 登录
async function handleLogin() {
  // 1.获取到输入框绑定的用户名和密码
  if (ruleForm.value.name && ruleForm.value.password) {
    // 2.向后台发送 请求 并携带用户名和密码
    const { data } = await getLoginHttp(
      ruleForm.value.name,
      ruleForm.value.password
    )
    // 3.判断后台返回的结果，如果成功根据用户权限，跳转不同的页面，如果失败，弹出提示“用户名和密码错误”
    if (data.code === 0) {
      const type = data.result.data.user_type
      const user_id = Number(data.result.data.user_id)
      localStorage.setItem('user_type', type)
      localStorage.setItem('token', data.result.token)
      putUserHttp(user_id, ruleForm.value.name, ruleForm.value.password)
      if (type == 0) {
        $router.push(`/commonview?id=${user_id}&name=${ruleForm.value.name}`)
      } else if (type == 1) {
        $router.push(`/trafficview?id=${user_id}&name=${ruleForm.value.name}`)
      } else if (type == 2) {
        $router.push(`/adminview?id=${user_id}&name=${ruleForm.value.name}`)
      }

      ElMessage({
        message: '登陆成功！',
        type: 'success',
      })
    } else {
      ElMessage({
        message: '用户名或密码错误！',
        type: 'warning',
      })
    }
  } else {
    ElMessage({
      message: '请输入用户名或密码！',
      type: 'warning',
    })
  }
}

// 注册表单点击关闭或取消事件
function DialogCancel() {
  dialogFormVisible.value = false
  form.name = ''
  form.psw = ''
}

async function handleRegister() {
  // 控制显示和隐藏
  dialogFormVisible.value = false
  // 向后台发送添加的请求
  const res = await getNewUserHttp(
    form.name,
    form.psw,
    user_type.value,
    user_onlinestatus.value,
    user_other.value
  )
  // 弹出消息
  ElMessage({
    message: '注册成功！',
    type: 'success',
  })

  // 添加完毕后清空表单
  form.name = ''
  form.psw = ''
}
</script>

<style scoped>
@import url('./components/style/Login.css');
</style>
